/** The wrapper that is called form will contain a form called FormDangKi **/ 
.form{ 
    width: 60%; 
    right: 0px; 
    min-height: 560px;     
    margin: 0px auto;     
    width: 500px; 
    position: relative;     
} 
/** Styling the form elements **/ 
.form h1{ 
    font-size: 48px; 
    color: rgb(6, 106, 117); 
    padding: 2px 0 10px 0; 
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif; 
    font-weight: bold; 
    text-align: center; 
    padding-bottom: 30px; 
} 
/** For the moment only webkit supports the background-clip:text; */ 
.form h1{ 
    background: -webkit-repeating-linear-gradient(-45deg,  
    rgb(18, 83, 93) ,  
    rgb(18, 83, 93) 20px,  
    rgb(64, 111, 118) 20px,  
    rgb(64, 111, 118) 40px,  
    rgb(18, 83, 93) 40px); 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
} 
.form h1:after{ 
    content: ' '; 
    display: block; 
    width: 100%; 
    height: 2px; 
    margin-top: 10px; 
    background: -moz-linear-gradient(left,  
                rgba(147,184,189,0) 0%,  
                rgba(147,184,189,0.8) 20%,  
                rgba(147,184,189,1) 53%,  
                rgba(147,184,189,0.8) 79%,  
                rgba(147,184,189,0) 100%);  
    background: -webkit-gradient(linear, left top, right top,  
                color-stop(0%,rgba(147,184,189,0)),  
                color-stop(20%,rgba(147,184,189,0.8)),  
                color-stop(53%,rgba(147,184,189,1)),  
                color-stop(79%,rgba(147,184,189,0.8)),  
                color-stop(100%,rgba(147,184,189,0)));  
    background: -webkit-linear-gradient(left,  
                rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%, 
                rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%, 
                rgba(147,184,189,0) 100%);  
    background: -o-linear-gradient(left,  
                rgba(147,184,189,0) 0%, 
                rgba(147,184,189,0.8) 20%, 
                rgba(147,184,189,1) 53%, 
                rgba(147,184,189,0.8) 79%, 
                rgba(147,184,189,0) 100%);  
    background: -ms-linear-gradient(left,  
                rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%, 
                rgba(147,184,189,1) 53%, 
                rgba(147,184,189,0.8) 79%, 
                rgba(147,184,189,0) 100%);  
    background: linear-gradient(left,  
                rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%, 
                rgba(147,184,189,1) 53%, 
                rgba(147,184,189,0.8) 79%, 
                rgba(147,184,189,0) 100%);  
} 
.form p{ 
    margin-bottom:15px; 
} 
.form p:first-child{ 
    margin: 0px; 
} 
.form label{ 
    color: rgb(64, 92, 96); 
    position: relative; 
} 
.form a{ 
    color: rgb(95, 155, 198); 
    text-decoration: underline; 
} 
/* placeholder */ 
::-webkit-input-placeholder  {  
    color: rgb(190, 188, 188);  
    font-style: italic; 
} 
input:-moz-placeholder{  
    color: rgb(190, 188, 188); 
    font-style: italic; 
}  
input { 
  outline: none; 
} 
/* styling the inputs */ 
.form input:not([type="checkbox"]){ 
    width: 90%; 
    margin-top: 4px; 
    padding: 10px 5px 10px 32px;     
    border: 1px solid rgb(178, 178, 178); 
/* input styling for browser */ 
    -webkit-appearance: textfield; 
    -webkit-box-sizing: content-box; 
      -moz-box-sizing : content-box; 
           box-sizing : content-box; 
    -webkit-border-radius: 3px; 
       -moz-border-radius: 3px; 
            border-radius: 3px; 
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; 
       -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; 
            box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; 
    -webkit-transition: all 0.2s linear; 
       -moz-transition: all 0.2s linear; 
         -o-transition: all 0.2s linear; 
            transition: all 0.2s linear; 
} 
.form input:not([type="checkbox"]):active, 
.form input:not([type="checkbox"]):focus{ 
    border: 1px solid rgba(91, 90, 90, 0.7); 
    background: rgba(238, 236, 240, 0.2);     
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; 
       -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; 
            box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; 
}  
/*styling a submit button called Sign Up */ 
.form p.button input{ 
    width: 30%; 
    cursor: pointer;     
    background: rgb(61, 157, 179); 
    padding: 8px 5px; 
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif; 
    color: #fff; 
    font-size: 24px;     
    border: 1px solid rgb(28, 108, 122);     
    margin-bottom: 10px;     
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); 
    -webkit-border-radius: 3px; 
       -moz-border-radius: 3px; 
            border-radius: 3px;     
    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 
            0px 0px 0px 3px rgb(254, 254, 254), 
            0px 5px 3px 3px rgb(210, 210, 210); 
       -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 
            0px 0px 0px 3px rgb(254, 254, 254), 
            0px 5px 3px 3px rgb(210, 210, 210); 
            box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 
            0px 0px 0px 3px rgb(254, 254, 254), 
            0px 5px 3px 3px rgb(210, 210, 210); 
    -webkit-transition: all 0.2s linear; 
       -moz-transition: all 0.2s linear; 
         -o-transition: all 0.2s linear; 
            transition: all 0.2s linear; 
} 
.form p.button input:hover{ 
    background: rgb(74, 179, 198); 
} 
.form p.button input:active, 
.form p.button input:focus{ 
    background: rgb(40, 137, 154); 
    position: relative; 
    top: 1px; 
    border: 1px solid rgb(12, 76, 87);     
    -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; 
       -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; 
            box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; 
} 
/** Moving button to right side of the page*/ 
p.signin.button{ 
    text-align: right; 
    margin: 5px 0; 
} /* end styling button here */ 
/* Styling registration form*/ 
#formDangKi{ 
    position: absolute; 
    top: 5px; 
    width: 88%;     
    padding: 0px 6% 20px 6%; 
    margin: 0 0 35px 0; 
    background: rgb(247, 247, 247); 
    border: 1px solid rgba(147, 184, 189,0.8); 
    -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),     
                        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; 
       -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),     
                           0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; 
            box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),     
                        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; 
    -webkit-box-shadow: 5px; 
    -moz-border-radius: 5px; 
         border-radius: 5px; 
}  


.form select {width: 100px; height: 30px;  border: 1px solid rgb(178, 178, 178); ;    }

